﻿<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head> 
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
        <title>PHP+jQuery+html5实现图片选取裁剪上传</title>
        <meta name="keywords" content="裁剪上传,手机图片上传" />
        <meta name="description" content="在网上找到了图片上传插件jquery.min.js，但没有上传功能，自己花了10分钟给加上去了哈，有bug留言，一般当天改完上传。" />
        <link rel="stylesheet" type="text/css" href="http://www.sucaihuo.com/jquery/css/common.css" />
        <link href="css/jquery.Jcrop.min.css" rel="stylesheet" type="text/css" />
        <style>
            .error {
                font-size: 18px;
                font-weight: bold;
                color: red;
                margin:10px 0
            }
            label{width:60px;display: inline-block}
            .info li{margin:10px 0}
            
        </style>
    </head>
    <body>
        <div class="head">
            <div class="head_inner clearfix">
                <ul id="nav">
                    <li><a href="http://www.sucaihuo.com">首 页</a></li>
                    <li><a href="http://www.sucaihuo.com/templates">网站模板</a></li>
                    <li><a href="http://www.sucaihuo.com/js">网页特效</a></li>
                </ul>
                <a class="logo" href="http://www.sucaihuo.com"><img src="http://www.sucaihuo.com/Public/images/logo.jpg" alt="素材火logo" /></a>
            </div>
        </div>
        <div class="container">
            <div class="demo">
                <h2 class="title"><a href="http://www.sucaihuo.com/js/71.html">PHP+jQuery+html5实现图片选取裁剪上传</a></h2>
                <form id="upload_form" enctype="multipart/form-data" method="post" action="/jqPlugin/Jcrop/upfile.aspx" onsubmit="return checkForm()">
                    <!-- hidden crop params -->
                    <input type="hidden" id="x1" name="x1" autocomplete="off" />
                    <input type="hidden" id="y1" name="y1" autocomplete="off"/>
                    <input type="hidden" id="x2" name="x2" autocomplete="off" />
                    <input type="hidden" id="y2" name="y2" autocomplete="off" />
                    <input type="hidden" id="type" name="type" autocomplete="off" />

                    <input type="file" name="image_file" id="image_file" onchange="fileSelectHandler()" />

                    <div class="error">注意：上传前，先截图</div>
                    <div class="step2">
                        <img id="preview" />
                            <div class="info">
                            <ul>
                                <li><label>文件大小</label> <input type="text" id="filesize" name="filesize" class="input" autocomplete="off" /></li>
                                <li><label>类型</label> <input type="text" id="filetype" name="filetype" class="input"autocomplete="off"/></li>
                                <li><label>图像尺寸</label> <input type="text" id="filedim" name="filedim" class="input"autocomplete="off"/></li>
                                <li><label>宽度</label> <input type="text" id="w" name="w" class="input"autocomplete="off"/></li>
                                <li><label>高度</label> <input type="text" id="h" name="h" class="input"autocomplete="off"/></li>
                            </ul>
                        </div>
                        <input type="submit" value="上传" class="btn" />
                    </div>
                </form>
            </div>
        </div>
        <div class="foot">
            Powered by sucaihuo.com  本站皆为作者原创，转载请注明原文链接：<a href="http://www.sucaihuo.com" target="_blank">www.sucaihuo.com</a>
        </div>
        <script type="text/javascript" src="http://www.sucaihuo.com/Public/js/other/jquery.js"></script> 
        <script src="js/jquery.Jcrop.min.js"></script>
        <script src="js/script.js"></script>
    </body>
</html>

